<template>
  <view class="tab-container">
    <view
      class="tab-nav"
      v-for="(item, index) in list"
      :key="index"
      @click="gotoTab(index)"
    >
      <span class="nav-child-top" :class="{ active1: active1 == index }">{{
        item.title
      }}</span>
      <span class="nav-child-bottom" :class="{ active2: active2 == index }">{{
        item.num
      }}</span>
    </view>
  </view>
</template>

<script>
export default {
  name: "tab",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      active1: 0,
      active2: 0,
    };
  },
  methods: {
    gotoTab(index) {
      this.active1 = index;
      this.active2 = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-container {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .tab-nav {
    flex: 1;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    span {
      margin-bottom: 10rpx;
    }

    .nav-child-top {
      font-size: 30rpx;
      color: #aaa;
    }

    .nav-child-bottom {
      font-size: 30rpx;
      color: #aaa;
    }

    .active1 {
      color: #000;
    }

    .active2 {
      color: #1a86ff;
    }
  }
}
</style>
